/* 第二屏 */

.screen02 {
    background: url('../images/02-bg.png') no-repeat center bottom;
}

.screen02 .goods-list {
    position: absolute;
    left: 50%;
    margin-left: -220px;
    bottom: 205px;
    transform-origin: right bottom;
    transform: scale(0);
}

.screen02 .sofa_b {
    transform: scale(0.5);
    position: absolute;
    left: 343px;
    top: 136px;
    opacity: 0;
    z-index: 1001;
}

.screen02 .input {
    position: absolute;
    right: 225px;
    top: 115px;
    /* transform: scale(0.7); */
    /*默认 转换原点 是在中心*/
    opacity: 0;
    transform-origin: right;
}

.screen02 .input .search {
    /* position: absolute;
  right: 0;
  top: 0; */
}

.screen02 .input .key {
    position: absolute;
    left: 100px;
    top: 5px;
    opacity: 0;
}

.screen02 .text {
    text-align: center;
}

.screen02 .text .text01 {}

.screen02 .text .text02 {
    opacity: 0;
    position: absolute;
}

/*第二屏的动画*/

.screen02.now .text .text01 {
    opacity: 0;
    position: absolute;
}

.screen02.now .text .text02 {
    opacity: 1;
    position: static;
    transition: opacity 1s;
}

.screen02.now .input {
    animation: input02 3s linear forwards;
    /* 播放完成的保持状态 backwards(回到起点) forwords（保持当前状态） */
}

.screen02.now .input .key {
    opacity: 1;
    transition: all 1s linear 1s;
}

.screen02.now .goods-list {
    opacity: 1;
    transform: scale(1);
    /* transform-origin: right bottom; */
    transition: all 1s linear 2s;
}

.screen02.leaved .sofa_b {
    animation: sofa02 1s linear;
}

@keyframes sofa02 {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translate(-80px, 1000px)
    }
}

/* 1.搜索框在右边动画的出来 */

/* 2.在显示器中间停留，显示出关键字 */

/* 商品列表动画显示  搜索框动画位移到右上角 */

@keyframes input02 {
    0% {
        /* 初始元素的位置 */
        opacity: 1;
        transform: translate(2000px, 130px);
    }
    33% {
        transform: translate(-180px, 130px);
    }
    67% {
        transform: translate(-180px, 130px);
    }
    100% {
        opacity: 1;
        transform: scale(0.7);
    }
}